<template>
  <div>
    <div>
      <ul class="ul">
        <li @click="click(i)" v-for="(v,i) in list" :key="i"> {{v}} </li>
        <!-- <li>专属推荐 </li>
        <li>魅力下午茶</li>
        <li>滋补养颜</li>
        <li>实惠套餐</li>
        <li>膳食平衡</li>

        <li>特色菜系</li> -->
      </ul>
      <swiper :options="swiperOption" ref="mySwiper" class="wp">
        <!-- slides -->
        <swiper-slide class="hezi">
          <div v-for="(v,i) in list1" :key="i" class="da">
            <div class="HotFoodShop_t">
              <img :src="v.img" alt="">
              <h3>{{v.h3}}</h3>
              <span class="HotFoodShop_q">{{v.sp}} </span>
            </div>
            <div class="ulty">

              <div class="list">
                <p class="img1"> <img :src="v.img" alt=""> </p>
                <p class="h21">{{v.h2}}</p>
                <p class="p">￥{{v.p}}</p>
                <p class="p1">去看看</p>
              </div>
              <div class="list">
                <p class="img1"> <img :src=" v.img2" alt=""> </p>
                <p class="h21">{{v.h1}}</p>
                <p class="p">￥{{v.p1}}</p>
                <p class="p1">去看看</p>
              </div>
              <div class="list">
                <p class="img1"> <img :src=" v.img3" alt=""> </p>
                <p class="h21">{{v.h4}}</p>
                <p class="p">￥{{v.p3}}</p>
                <p class="p1">去看看</p>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <swiper-slide>I'm Slide 4</swiper-slide>
        <swiper-slide>I'm Slide 5</swiper-slide>
        <swiper-slide>I'm Slide 6</swiper-slide>
        <swiper-slide>I'm Slide 7</swiper-slide>
        <!-- Optional controls -->
        <!-- <div class="swiper-pagination" slot="pagination"></div>// -->
        <!-- <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div> -->
        <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
      </swiper>
    </div>

  </div>

</template>
<script>
export default {
  data() {
    return {
      list: ["专属推荐", "魅力下午茶", "滋补养颜", "实惠套餐", "膳食平衡", "特色菜系"],
      list1: [
        {
          img:
            "https://fuss10.elemecdn.com/8/54/ece2a80c1e828b7b4c4b9c789ad42jpeg.jpeg?imageMogr/format/webp/thumbnail/!42x42r/gravity/Center/crop/42x42/",
          h3: "北喜日式料理（SOGO庄胜店）",
          sp: "¥20起送 / 配送费¥5",
          img1:
            "https://fuss10.elemecdn.com/9/65/8ff645b60a33a03b5637e327218f4jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h2: "咖喱鸡排饭套餐",
          p: "52",
          img2:
            "https://fuss10.elemecdn.com/4/04/40be924b2365ad7e2744397d86391jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h1: "特色干锅土豆片",
          p1: "58",
          img3:
            "https://fuss10.elemecdn.com/d/d5/c6856d2babee61b786210971335dejpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h4: "三文鱼刺身",
          p3: "68"
        },
        {
          img:
            "https://fuss10.elemecdn.com/8/54/ece2a80c1e828b7b4c4b9c789ad42jpeg.jpeg?imageMogr/format/webp/thumbnail/!42x42r/gravity/Center/crop/42x42/",
          h3: "北喜日式料理（SOGO庄胜店）",
          sp: "¥20起送 / 配送费¥5",
          img1:
            "https://fuss10.elemecdn.com/9/65/8ff645b60a33a03b5637e327218f4jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h2: "咖喱鸡排饭套餐",
          p: "52",
          img2:
            "https://fuss10.elemecdn.com/4/04/40be924b2365ad7e2744397d86391jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h1: "特色干锅土豆片",
          p1: "58",
          img3:
            "https://fuss10.elemecdn.com/d/d5/c6856d2babee61b786210971335dejpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h4: "三文鱼刺身",
          p3: "68"
        },
        {
          img:
            "https://fuss10.elemecdn.com/8/54/ece2a80c1e828b7b4c4b9c789ad42jpeg.jpeg?imageMogr/format/webp/thumbnail/!42x42r/gravity/Center/crop/42x42/",
          h3: "北喜日式料理（SOGO庄胜店）",
          sp: "¥20起送 / 配送费¥5",
          img1:
            "https://fuss10.elemecdn.com/9/65/8ff645b60a33a03b5637e327218f4jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h2: "咖喱鸡排饭套餐",
          p: "52",
          img2:
            "https://fuss10.elemecdn.com/4/04/40be924b2365ad7e2744397d86391jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h1: "特色干锅土豆片",
          p1: "58",
          img3:
            "https://fuss10.elemecdn.com/d/d5/c6856d2babee61b786210971335dejpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h4: "三文鱼刺身",
          p3: "68"
        },
        {
          img:
            "https://fuss10.elemecdn.com/8/54/ece2a80c1e828b7b4c4b9c789ad42jpeg.jpeg?imageMogr/format/webp/thumbnail/!42x42r/gravity/Center/crop/42x42/",
          h3: "北喜日式料理（SOGO庄胜店）",
          sp: "¥20起送 / 配送费¥5",
          img1:
            "https://fuss10.elemecdn.com/9/65/8ff645b60a33a03b5637e327218f4jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h2: "咖喱鸡排饭套餐",
          p: "52",
          img2:
            "https://fuss10.elemecdn.com/4/04/40be924b2365ad7e2744397d86391jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h1: "特色干锅土豆片",
          p1: "58",
          img3:
            "https://fuss10.elemecdn.com/d/d5/c6856d2babee61b786210971335dejpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h4: "三文鱼刺身",
          p3: "68"
        },
        {
          img:
            "https://fuss10.elemecdn.com/8/54/ece2a80c1e828b7b4c4b9c789ad42jpeg.jpeg?imageMogr/format/webp/thumbnail/!42x42r/gravity/Center/crop/42x42/",
          h3: "北喜日式料理（SOGO庄胜店）",
          sp: "¥20起送 / 配送费¥5",
          img1:
            "https://fuss10.elemecdn.com/9/65/8ff645b60a33a03b5637e327218f4jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h2: "咖喱鸡排饭套餐",
          p: "52",
          img2:
            "https://fuss10.elemecdn.com/4/04/40be924b2365ad7e2744397d86391jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h1: "特色干锅土豆片",
          p1: "58",
          img3:
            "https://fuss10.elemecdn.com/d/d5/c6856d2babee61b786210971335dejpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h4: "三文鱼刺身",
          p3: "68"
        },
        {
          img:
            "https://fuss10.elemecdn.com/8/54/ece2a80c1e828b7b4c4b9c789ad42jpeg.jpeg?imageMogr/format/webp/thumbnail/!42x42r/gravity/Center/crop/42x42/",
          h3: "北喜日式料理（SOGO庄胜店）",
          sp: "¥20起送 / 配送费¥5",
          img1:
            "https://fuss10.elemecdn.com/9/65/8ff645b60a33a03b5637e327218f4jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h2: "咖喱鸡排饭套餐",
          p: "52",
          img2:
            "https://fuss10.elemecdn.com/4/04/40be924b2365ad7e2744397d86391jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h1: "特色干锅土豆片",
          p1: "58",
          img3:
            "https://fuss10.elemecdn.com/d/d5/c6856d2babee61b786210971335dejpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h4: "三文鱼刺身",
          p3: "68"
        },
        {
          img:
            "https://fuss10.elemecdn.com/8/54/ece2a80c1e828b7b4c4b9c789ad42jpeg.jpeg?imageMogr/format/webp/thumbnail/!42x42r/gravity/Center/crop/42x42/",
          h3: "北喜日式料理（SOGO庄胜店）",
          sp: "¥20起送 / 配送费¥5",
          img1:
            "https://fuss10.elemecdn.com/9/65/8ff645b60a33a03b5637e327218f4jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h2: "咖喱鸡排饭套餐",
          p: "52",
          img2:
            "https://fuss10.elemecdn.com/4/04/40be924b2365ad7e2744397d86391jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h1: "特色干锅土豆片",
          p1: "58",
          img3:
            "https://fuss10.elemecdn.com/d/d5/c6856d2babee61b786210971335dejpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h4: "三文鱼刺身",
          p3: "68"
        },
        {
          img:
            "https://fuss10.elemecdn.com/8/54/ece2a80c1e828b7b4c4b9c789ad42jpeg.jpeg?imageMogr/format/webp/thumbnail/!42x42r/gravity/Center/crop/42x42/",
          h3: "北喜日式料理（SOGO庄胜店）",
          sp: "¥20起送 / 配送费¥5",
          img1:
            "https://fuss10.elemecdn.com/9/65/8ff645b60a33a03b5637e327218f4jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h2: "咖喱鸡排饭套餐",
          p: "52",
          img2:
            "https://fuss10.elemecdn.com/4/04/40be924b2365ad7e2744397d86391jpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h1: "特色干锅土豆片",
          p1: "58",
          img3:
            "https://fuss10.elemecdn.com/d/d5/c6856d2babee61b786210971335dejpeg.jpeg?imageMogr/format/webp/thumbnail/!220x220r/gravity/Center/crop/220x220/",
          h4: "三文鱼刺身",
          p3: "68"
        }
      ],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    click(e) {
      var lis = document.querySelectorAll("li");
      //   console.log(this);
      for (var i = 0; i < lis.length; i++) {
        lis[i].className = "";
      }
      this.swiper.slideTo(e, 1000, false);
      lis[e].className = "li";
    }
  }
};
</script>
<style lang="less" scoped>
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.hezi {
  width: 100%;
  background: #cccccc;
}
.da {
  border-radius: 10px;
  .px2rem(height,420);
  width: 96%;
  margin: 2%;
  background: #ffffff;
}
.ul {
  .px2rem(height,100);
  width: 100%;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 9;
  background: #ffffff;
  // justify-content: space-between;
  align-items: center;
  li {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .li {
    border: 1px solid red;
    border-radius: 100%;
    color: black;
  }
}

.HotFoodShop_t {
  width: 100%;
   border-radius: 10px;
  .px2rem(height, 100);
  display: flex;
  align-items: center;
  background: #f3f3f3;
  img {
    .px2rem(width, 45);
    .px2rem(height, 45);
    .px2rem(padding-left, 10);
  }
  h3 {
    font-weight: bolder;
    .px2rem(font-size, 30);
    .px2rem(padding-left, 30);
  }
  span {
    .px2rem(font-size, 20);
    .px2rem(padding-left, 30);
    color: #cccccc;
  }
}

.ulty {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.list {
  width: 30%;
  .img1 {
    text-align: center;
    img {
      width: 80%;
    }
  }
  .h21 {
    text-align: center;
    .px2rem(font-size, 24);
    .px2rem(margin-top, 10);
  }
  .p {
    // text-align: center;
    color: red;
    .px2rem(font-size, 25);
    .px2rem(margin-top, 10);
    .px2rem( margin-bottom, 10);
    font-weight: bolder;
    
  }
  .p1 {
    // .px2rem(margin-top, -30);
    border: 1px solid red;
    .px2rem(width, 180);
    .px2rem(height, 45);
    .px2rem(font-size, 25);
    color: red;
    text-align: center;
    margin: 0 auto;
    .px2rem(line-height, 50);
    border-radius: 5px;
  }
}
.wp {
  .px2rem(margin-bottom,120);
}
</style>
